<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{margin: 10px;padding: 10px;}
    img{width: 100px;}
  </style>
</head>
<body>
  
</body>
<script>
  // 有子对象的对象叫枝对象
  // 没有子对象的对象叫叶对象



  // 创建枝对象的组合器
  class Team{
    constructor(id){
      this.ele = document.createElement("div");
      this.ele.id = id;
      this.children = [];
    }
    add(child){
      this.children.push(child);
      this.ele.appendChild(child.ele);
    }
    remove(child){
      const i = this.children.indexOf(child)
      if(i !== -1){
        this.children.splice(i, 1);
        child.ele.remove();
      }
    }
    addBorder(){
      this.ele.style.border = "solid 2px black";
      this.children.forEach(val=>{
        val.addBorder();
      })
    }
    removeBorder(){
      this.ele.style.border = "none";
      this.children.forEach(val=>{
        val.removeBorder();
      })
    }
  }
  
  // 创建叶对象的组合器
  class Item{
    constructor(src){
      this.ele = document.createElement("img");
      this.ele.src = src;
    }
    add(){
      console.log("这是一个叶对象，不能再添加子对象了")
    }
    remove(){
      console.log("这是一个叶对象，没有子对象可被删除")
    }
    addBorder(){
      this.ele.style.border = "solid 2px red";
    }
    removeBorder(){
      this.ele.style.border = "none";
    }
    // ...
  }

  
  const img0 = new Item("https://t7.baidu.com/it/u=3911840071,2534614245&fm=193&f=GIF");
  const img1 = new Item("https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF");
  const img2 = new Item("https://t7.baidu.com/it/u=4198287529,2774471735&fm=193&f=GIF");
  const img3 = new Item("https://t7.baidu.com/it/u=2511982910,2454873241&fm=193&f=GIF");

  const box = new Team("box");
  document.body.appendChild(box.ele);

  const xbox1 = new Team("xbox1");
  const xbox2 = new Team("xbox2");
  const xbox3 = new Team("xbox3");

  box.add(img0);

  box.add(xbox1);
  box.add(xbox2);
  box.add(xbox3);

  xbox1.add(img1);
  xbox2.add(img2);
  xbox3.add(img3);

  box.remove(xbox2);

  box.addBorder();

  xbox3.removeBorder();

  // div.box
  //   img0
  //   xbox1
  //     img1
  //   xbox2
  //     img2
  //   xbox3
  //     img3





</script>
</html>